import React, {PureComponent} from 'react'
import PropTypes from 'prop-types'
import {
  Form,
  Input,
  Tree
} from 'antd'
import menuList from '../../config/menuConfig'

const Item = Form.Item
const { TreeNode } = Tree;

export default class AuthForm extends PureComponent{



     static propTypes = {
        role: PropTypes.object
      }

       // 父组件传过来的值  先渲染到checkedKeys里面 后面可以修改  用 constructor
       // 用 constructor 方便在 弹框上修改权限时  可以动态更新  但是刚打开弹框时 不会跟随不同role里面不同的menus数组 自动更新menus数组
       // 即 他会缓存上一个 角色的里的menus  选上一个 取消 再点开  前面勾选的那个 被勾选了 bug
      constructor (props){
            super(props)
            // 根据传入角色的menus生成初始状态  父组件传过来的role对象里有个 menus数组 开始把menus数组值 给 checkedKeys数组
            const {menus} = this.props.role; // 后面 修改checkedKeys数组的内容  而 menus数组里的内容会不变
            this.state = {
                checkedKeys:menus
            }
      }

      // 选中某个node时的回调    修改checkedKeys数组的内容 
      onCheck =(checkedKeys)=>{
         this.setState({checkedKeys})
      }

      // 获取最新menus 数组 方便 父组件调用
      getMenus =()=> this.state.checkedKeys;

      getTreeNodes =(menuList)=>{
        return menuList.reduce((pre,item)=>{
            // {/* title  tilte */}
            pre.push(
                <TreeNode title={item.title} key={item.key}>
                  { item.children ? this.getTreeNodes(item.children):null  }
               </TreeNode> 
           )
           return pre;
        },[])
      }

      componentWillMount () {
        this.treeNodes = this.getTreeNodes(menuList)
      }

           // 根据新传入的role来更新checkedKeys状态
            /*
            初始时不会调用  当组件接收到新的属性时自动调用  在render 之前
            */
       componentWillReceiveProps (nextProps) {
                console.log('componentWillReceiveProps()', nextProps)
                const menus = nextProps.role.menus
                this.setState({
                checkedKeys: menus
                })
                // this.state.checkedKeys = menus
        }

     render(){
        const {role} = this.props
        const {checkedKeys} = this.state;
         // 指定Item布局的配置对象
        const formItemLayout = {
            labelCol: { span: 4 },  // 左侧label的宽度
            wrapperCol: { span: 15 }, // 右侧包裹的宽度
        }
      return (
        <div>
        <Item label='角色名称' {...formItemLayout}>
          <Input value={role.name} disabled/>
        </Item>
        <Tree
          checkable
          defaultExpandAll={true}
          // checkedKeys={role.menus}  不能写成 role.menus 这只是打开弹框 把数据返回的 菜单数组选中 但是不能进行修改操作
          checkedKeys={checkedKeys}
          onCheck={this.onCheck}
        >
          <TreeNode title="平台权限" key="all">
            {this.treeNodes}
          </TreeNode>
         </Tree>
        </div>
      )
    }
}